<template>
  <Demo />
  <HelloWorld>
    <template #default>
      <p>这是默认插槽qqqqqqqqq</p>
    </template>
    <template #footer>
      <p>这是具名插槽</p>
    </template>
  </HelloWorld>
  <Foo :msg="msg" @aaa="getNum" v-if="flag" />
  <button @click="flag = false">销毁Foo组件</button>
  <button @click="msg = 'hello V3'">修改msg</button>
</template>

<script>
import { ref, provide, inject } from 'vue'
import myBus from '@/myBus'
import HelloWorld from './components/HelloWorld.vue'
import Foo from './components/Foo.vue'
import Demo from './components/Demo.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    Foo,
    Demo,
  },
  setup(props) {
    let gg = '轩轩'
    provide('aaa', gg)
    
    let flag = ref(true)
    myBus.on('getData', (value) => {
      console.log('获取子组件数据', value)
    })
    let msg = ref('hello world')
    function getNum(val) {
      console.log(val, 'val')
    }
    return {
      msg,
      getNum,
      flag,
    }
  },
}
</script>

<style></style>
